<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html">
        <h:form>
            <h:dataTable cellpadding="5px" cellspacing="16px" styleClass="allaroundborder" headerClass="allaroundborder" columnClasses="allaroundborder" 
                         rowClasses="allaroundborder" value="#{purchaseOrderBean.purchaseOrderItems}" var="p">

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Item name" />
                    </f:facet>
                    <h:outputText value="#{p.productName}" />
                </h:column>    

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Product Price" />
                    </f:facet>
                    <h:outputText value="#{p.productPrice}" />
                </h:column>    

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Quantity" />
                    </f:facet>
                     <h:inputText required="true" requiredMessage="Field is required." id="numOfProduct" value="#{p.numOfProduct}">
                    </h:inputText>
                </h:column>    

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Shipping Address" />
                    </f:facet>
                    <h:inputText required="true" requiredMessage="Field is required." id="shippingAddress" value="#{p.shippingAddress}">
                    </h:inputText>
                </h:column>  

            </h:dataTable>    
              <p></p><h:commandButton action="index.xhtml" value="Return to index"  actionListener="#{purchaseOrderBean.resetAfterAction}"/>
              <h:commandButton action="confirmPurchaseOrder.xhtml" value="Proceed" actionListener="#{purchaseOrderBean.calculateTotalPrice}"/>
        </h:form>
</ui:composition>
